import { ComponentProps, Hook, VueComponent } from "vue3-oop"
import { NIcon,NRow,NCol } from 'naive-ui';
import Draggable from 'vuedraggable';
import WidgetDraft from '../../basic/WidgetDraft'
import { ExpandOutlined,LeftOutlined,RightOutlined,CloseOutlined,DragOutlined } from '@vicons/antd'

import styles from './FlexDraft.module.scss'
import { FormData,WidgetNode,ReserveItem } from '../../../types'

import FlexProps from "./FlexProps";
import LayoutProps from "../../basic/LayoutProps";

interface IProps {
  formData: FormData,
  widgetNode: WidgetNode
}
export default class FlexDraft extends VueComponent<IProps> {
  static defaultProps: ComponentProps<IProps> = {
    formData: {},
    widgetNode: {}
  }

  constructor(
  ) {
    super();
  }

  // 拖动新增组件
  handleDragAddDraftFormWidget=(event:any)=>{
    const { formData,widgetNode } = this.props;
    // 获取darggable组件列表新增项的下标
    const newIndex = event.newIndex;
    const targetList = widgetNode.children;
    const targetNode = targetList[newIndex];

    if(targetNode.widgetId){
      // 已存在组件
      targetNode.parentId = widgetNode.widgetId;
      targetNode.setSelected();
    }else{
      // 新增组件
      const reserveItem = (targetNode as any) as ReserveItem;
      formData.createNewWidgetNode(widgetNode,reserveItem,newIndex);
    }

  };

  @Hook('Mounted')
  onMounted(){
    const form = document.querySelector('.designer-draft-form')
    // console.log(form?.scrollWidth)
  }

  render() {
    const { formData,widgetNode } = this.props;
    const widgetProps = widgetNode.widgetProps as FlexProps;

    let defaultSpan = widgetProps.defaultSpan || 24;

    // 水平间距
    const xGap = widgetProps.gaps.x;
    // 垂直间距
    const yGap = widgetProps.gaps.y;

    const iconSize = 18;

    return (
      <Draggable
        class={[
          styles.flex_draft,
          `default-span-${defaultSpan}`
        ]}
        style={{
          minHeight:'56px',
          alignItems: 'flex-start',
          alignContent: 'flex-start',
          boxSizing: 'border-box',
          margin: 'unset',
          padding: `${yGap/2}px ${xGap/2}px`,
          width: '100%',
        }}
        {...{
          animation:"300",
          group:{
            name: 'form'
          },
          chosenClass: styles.child_chosen,
          dragClass: styles.child_drag,
          ghostClass: styles.child_ghost,
          onAdd:this.handleDragAddDraftFormWidget
        }}
        list={widgetNode.children}
        item-key="id"
        tag="n-row"
        componentData={{
          gutter: [xGap,yGap]
        }}
      >
        {{
          item:({element}:any)=>{
            const childNode = element as WidgetNode;
            if(childNode.widgetId){
              const childProps = childNode.widgetProps as LayoutProps;
              // console.log(childProps)

              const isActive = childNode.isSelected();
              const activeClass = isActive ? 'active' : undefined;

              return (childNode.widgetId &&
                  <NCol
                      span={childProps.layout_reactive.span as any}
                      class={[
                        styles.flex_child,
                        activeClass]}
                      {...{
                        onClick:(event:MouseEvent)=>{
                          event.stopPropagation();
                          childNode.setSelected();
                        },
                        style:{
                          boxSizing: 'border-box',
                        },
                      }}
                  >
                      <WidgetDraft
                          formData={formData}
                          widgetNode={childNode}
                      />
                    {isActive&&
                        <div class={[styles.drag_tool]} style={{height:`${iconSize}px`}}>
                          {/* 选择外层组件 */}
                            <NIcon size={iconSize} {...{onClick:(event:MouseEvent)=>{event.stopPropagation();childNode.setParentSelected();}} as any}><ExpandOutlined/></NIcon>
                          {/* 前移一位 */}
                            <NIcon size={iconSize} {...{onClick:(event:MouseEvent)=>{event.stopPropagation();childNode.moveFoward();}} as any}><LeftOutlined/></NIcon>
                          {/* 后移一位 */}
                            <NIcon size={iconSize} {...{onClick:(event:MouseEvent)=>{event.stopPropagation();childNode.moveBackwards();}} as any}><RightOutlined/></NIcon>
                          {/* 删除组件 */}
                            <NIcon size={iconSize} {...{onClick:(event:MouseEvent)=>{event.stopPropagation();childNode.remove();}} as any}><CloseOutlined/></NIcon>
                          {/* 拖动组件 */}
                            <NIcon size={iconSize} style={{cursor:'move'}}><DragOutlined/></NIcon>
                        </div>
                    }
                  </NCol>
              )
            }
          }
        }}
      </Draggable>
    )
  }
}